<template>
    <div class="address">
        <div class="header">
            <div class="arrow" @click="receiving()"><返回</div>
            <div class="dress">我的收货地址</div>
            <button class="newaddress" @click=address()>新增地址</button>
        </div>
        <div v-for="(item,index) in list" :key="index" style="height:80px;float:left">
            <div class="addr">{{item.address}}</div>
            <div class="np">
                <span class="name">{{item.name}}</span>{{item.id}}
                <span class="phone">{{item.phone}}</span>
                <button class="edit" @click=editaddress(item)>编辑</button>
            </div>
        </div>
    </div>
    
</template>

<script>
import { address_list } from '@/utils/api';

export default {
     data(){
        return{
            list:[],
        }
    },
     mounted(){
       address_list({userid:'17339812773'}).then((res)=>{
        this.list=res.data.list;
        console.log(res.data.list)
       })
    } ,
    methods:{
        address(){
            this.$router.push('/Addaddress');
        },
        editaddress(item){
            this.$router.push('/edit/'+item);
        },
        receiving(){
            this.$router.push('/index/mine');
        }
   } ,
       
}

</script>

<style>
.header .arrow{
    font-size: 20px;
    margin: 20px 10px;
    float: left;
    color: cornflowerblue;
}
.header .dress{
    font-size: 20px;
    font-weight: bold;
    float: left;
    margin: 25px 65px;
}
.header .newaddress{
    margin-top: -50px;
    float: right;
}
.addr{
    font-size: 18px;
    margin-right: 90px;
    margin-left: 30px;  
    float: left;
    width: 100%;
    line-height: 18px;
}
.np{
    width: 100%;
    float: left;
    margin-top: -30px;
    /* margin-left: 10px; */
}
.name{
    color: gray;
    font-size: 18px;
    margin-left: 30px; 
    /* margin-top: 10px; */
    float: left;
    line-height: 100px;
}
.phone{
    color: gray;
    font-size: 18px;
    float: left;
    line-height: 100px;
    /* margin-top: 10px; */
    margin-left: 10px;
}
.edit{
    right: 10px;
    position: absolute;
    margin-top: 35px;
}
</style>